<template>
    <div class="layout-container">
        <div class="layout-container-form">
            <div class="layout-container-form-search">
                <div>
                    <el-input v-model="page.po.name" placeholder="请输入名称" clearable />
                </div>

                <div>
                    <el-select v-model="page.po.province" placeholder="省份" clearable @change="getTableData" filterable>
                        <el-option v-for="item in provinceList" :label="item" :value="item" />
                    </el-select>
                </div>

                <div>
                    <el-button type="primary" :icon="Search" @click="getTableData">搜索</el-button>
                </div>
            </div>
        </div>

        <div class="layout-container-table">
            <Table ref="table" v-model:page="page" v-loading="loading" :data="tableData" @getTableData="getTableData" pageLayout="prev,pager,next">
                <el-table-column prop="city" label="城市" align="left" />

                <el-table-column prop="name" label="名称" :show-overflow-tooltip="true" align="left" width="320">
                    <template #default="scope">
                        <el-link type="success" @click="showOnMap(scope.row)">{{ scope.row.name }}</el-link> &nbsp;
                    </template>
                </el-table-column>
            </Table>
        </div>
    </div>
</template>

<script setup lang="ts">
import {onActivated, reactive, ref}                           from 'vue'
import {page as gardenPage, provinceList as loadProvinceList} from "@/api/garden"
import {Search,}                                              from '@element-plus/icons-vue'
import Table                                                  from '@/components/table/index.vue'
import router                                                 from "@/router";

const emits = defineEmits(["clickGarden"])

/**
 * 点击后,向上汇报点击事件
 */
function showOnMap(garden: any) {
    emits("clickGarden", garden)
}

interface PageInterface {
    current: any,
    size: any,
    total: any,
    orders: any,
    po: any,
}

// 分页参数, 供table使用
const page: PageInterface = reactive({
    current: 1,
    size   : 20,
    total  : 0,
    orders : [{column: "id", asc: false}],
    po     : {
        province: null,
        name    : null,
    },
})

const loading   = ref(true)
const tableData = ref([])

/**
 * 获取表格数据
 * @author mbb
 */
const getTableData = () => {
    loading.value = true

    let pageQuery = Object.assign({}, page)
    delete pageQuery.total
    gardenPage(pageQuery).then(res => {
        tableData.value = res.data.records
        page.current    = res.data.current
        page.total      = res.data.total
    }).finally(() => {
        loading.value = false
    })
}

const provinceList = ref([])

function initParam() {
    loadProvinceList().then((res: any) => {
        provinceList.value = res?.data || []
    })

    page.po.name = router.currentRoute.value.query.gardenName || null
}

// -----------------------------主程序start-----------------------------------------
onActivated(() => {
    initParam()
    getTableData()
})
// -----------------------------主程序end-----------------------------------------

</script>

<style>

</style>

